<template>
    <router-view/>
</template>

<script>
    import {defineComponent, onBeforeUnmount, onMounted} from 'vue';
    import {useStore} from 'vuex';

    export default defineComponent({
        setup() {
            const storage = useStore();
            // 更新页面宽度
            const onResize = () => {
                storage.commit('updateClientWidth', document.body.offsetWidth);
            };

            // 加载页面
            onMounted(() => {
                // 更新页面宽度
                onResize();
                window.addEventListener("resize", onResize);
            });
            // 销毁页面
            onBeforeUnmount(() => {
                window.removeEventListener("resize", onResize);
            });
        }
    });
</script>

<style>
    body {
        margin: 0;
    }
</style>